// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
   install(app) {
      // 懒加载指令逻辑
      // 定义全局指令
      app.directive('img-lazy', {
         mounted(el, binding) {
            // el:表示指令绑定元素 img
            // binding:binding.value 表示指令后面表达式的值 就是图片的url
            console.log(el, binding.value)
            const { stop } = useIntersectionObserver(
               el,
               ([{ isIntersecting }]) => {
                  if (isIntersecting) {
                     // 图片进入视口范围
                     el.src = binding.value
                     stop()
                  }
               },
            )
         }
      })
   }
}